<template>
    <div class="List">

      <div class="header">
        城市选择
        <router-link to="/">
          <div class="iconfont header-back">&#xe624;</div>
        </router-link>
      </div>
      <Search :cities="cities"></Search>
<!--      <p class="man">-->
<!--        热门城市-->
<!--      </p>-->
<!--      <div class="list-main">-->
<!--        <ul>-->
<!--          <li v-for="(item,key) in list">-->

<!--            <p class="li-p">-->
<!--              {{item.name}}-->
<!--            </p>-->
<!--          </li>-->
<!--        </ul>-->
<!--      </div>-->
<!--      <p class="goods-p">-->
<!--        字母排序-->
<!--      </p>-->
<!--      <div class="list-content">-->
<!--        <ul>-->
<!--          <li class="content-li" v-for="(v,k) in Object.keys(obj).sort()">-->
<!--            {{v}}-->
<!--            <ol class="list-ol" >-->

<!--                <li v-for="(item,key) in obj[v]">-->
<!--                  <router-link :to="'/?id='+item.id">-->
<!--                  {{item.name}}-->
<!--                </router-link>-->
<!--                </li>-->

<!--            </ol>-->
<!--          </li>-->
<!--        </ul>-->

<!--      </div>-->
      <city :letter="letter" :cities="cities"></city>
      <citylist @change = "handleLetterChange"></citylist>
      </div>


</template>

<script>
  import axios from 'axios'
  import citylist from "./citylist";
  import city from "./city";
  import Search from "./Search";
    export default {
        name: "List",
      components:{city,citylist,Search},
        data(){
          return{
            list:[],
            cities:{},
            letter:"",
            li:[]
          }
        },
      mounted() {
        //   axios.get("/static/data/city.json").then((res)=>{
        //     this.list=res.data.data.hotCities
        //
        //   })
        // axios.get("/static/data/city.json").then((res)=>{
        //   this.obj=res.data.data.cities
        // })
        this.getCityInfo()
      },
      methods:{
        handleLetterChange(letter){

          this.letter = letter
        },

        getCityInfo(){
          axios.get('/api/city.json')
            .then(this.handleGetCityInfoSucc)
        },
        handleGetCityInfoSucc(res){
          res = res.data
          console.log(res.data);
          if (res.ret && res.data) {
            const data = res.data
            this.cities = data.cities
            this.hotCities = data.hotCities
          }
        }
      }
    }
</script>

<style lang="stylus" scoped>

  @import "../../src/assets/styles/varibles.styl"
.header
    position: relative
    overflow: hidden
    height: $headerHeight
    line-height: $headerHeight
    text-align: center
    color: #fff
    background: $bgColor
    font-size: .32rem
    z-index 1
    .header-back
      position: absolute
      top: 0
      left: 0
      width: .64rem
      text-align: center
      font-size: .4rem
      color: #fff


/*.man*/
/*    width 100%*/
/*    height .8rem*/
/*    background-color: #eee*/
/*    font-size .3rem*/
/*    line-height .8rem*/
/*.list-main*/
/*    height 2rem*/
/*    ul*/

/*      display flex*/
/*      flex-wrap wrap*/
/*     li*/
/*       width 33.2%*/

/*       .li-p*/
/*          border #333333 0.01rem solid*/
/*          height 1rem*/
/*          text-align center*/
/*          line-height 1rem*/

/*.goods-p*/
/*      height .7rem*/
/*      background-color: #eee*/
/*      line-height .7rem*/
/*      padding-left .2rem*/
.list-content
      ul
         .content-li
            border-bottom #333333 solid 0.01rem
            margin-left 0.1rem
            margin-top 0.1rem
            ol
              li
                  margin-left 0.1rem
                  margin-top 0.1rem
                  margin-bottom  0.1rem
          a
            color #000000
</style>
